﻿<!DOCTYPE html xml:lang="utf-8" lang="utf-8">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<script src='../lib/jquery.min.js'></script>
<!--<script src='../lib/jquery-ui.custom.min.js'></script>-->
<script src='../fullcalendar/fullcalendar.min.js'></script>

<script>

	$(document).ready(function() {

		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
    // page is now ready, initialize the calendar...

		$('#calendar').fullCalendar({
			// put your options and callbacks here
			
			// set options
			header:{
				right: 'prev,next today',
				center: 'title',
				left: ''
				//left: 'month,agendaWeek,agendaDay'
			},
			firstDay:1,
			buttonText: {
				prev: '上个月',
				next: '下个月',
				today: '今天'
			},
			weekMode:'fixed',
			monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			dayNames:['星期日', '星期一', '星期二', '星期三','星期四', '星期五', '星期六'], 
			dayNamesShort:['周日', '周一', '周二', '周三','周四', '周五', '周六'],
			
			//day callback function
			dayClick: function(date, allDay, jsEvent, view) {
				//alert('a day has been clicked!');
				if (allDay) {
					alert('Clicked on the entire day: ' + date);
				}

				alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

				alert('Current view: ' + view.name);

				// change the day's background color just for fun
				$(this).css('background-color', 'red');

			},
			
			//events
			events: [				
				{
					id: 001,	// workschedule id
					title: '张三（2） 上午班', //for display employee name
					start: new Date(y, m, d, 10, 30),
					end: new Date(y, m, d, 11, 0),
					allDay: true,
					//url:''
				},
				{
					id: 002,
					title: '李四 下午班',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					allDay: true,
					url:'http://google.com/'
				}
			],
			
			eventClick: function(calEvent, jsEvent, view) {
				
				if (event.url) {
					window.open(event.url);
					return false;
				}
				
				alert('Event: ' + calEvent.title);
				alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
				alert('View: ' + view.name);

				// change the border color just for fun
				$(this).css('border-color', 'red');

			},
			
			//mouseover event call back function
			eventMouseover: function(event, jsEvent, view ) { 
				//alert('Event: ' + event.title);
				//alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
			},
			
			eventMouseout:function( event, jsEvent, view ) { 
			
			}
		});

	});
	
	
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>